export const loadingOptions = {
  graphic: {
    elements: [
      {
        type: 'group',
        left: 'center',
        top: 'center',
        children: new Array(7).fill(0).map((val, i) => ({
          type: 'rect',
          x: i * 20,
          shape: {
            x: 0,
            y: -40,
            width: 10,
            height: 80,
          },
          style: {
            fill: '#5470c6',
          },
          keyframeAnimation: {
            duration: 1000,
            delay: i * 200,
            loop: true,
            keyframes: [
              {
                percent: 0.5,
                scaleY: 0.3,
                easing: 'cubicIn',
              },
              {
                percent: 1,
                scaleY: 1,
                easing: 'cubicOut',
              },
            ],
          },
        })),
      },
    ],
  },
}

export const defaultChartPieOptions = {}

export const defaultChartGaugeOptions = {
  title: {
    left: '50%',
    top: '65%',
    textAlign: 'center',
    text: '{text|32%}\n{subtext|cpu占用}',
    textStyle: {
      rich: {
        text: {
          fontSize: 22,
          lineHeight: 30,
          fontWeight: 'bold',
          color: '#FFFFFF',
        },
        subtext: {
          fontSize: 12,
          lineHeight: 16,
          fontWeight: 400,
          color: '#FFFFFF',
        },
      },
    },
  },
}

export const defaultChartBarOptions = {
  grid: {
    top: 40,
    right: 0,
    bottom: 20,
    left: 40,
  },
  xAxis: {
    axisLabel: { color: '#bbb' },
  },
  yAxis: {
    axisLabel: { margin: 2 },
    splitLine: { lineStyle: { color: '#333' } },
  },
}

export const defaultChartLineOptions = {
  grid: {
    top: 40,
    bottom: 30,
    right: 10,
  },
  legend: {
    show: false,
  },
  xAxis: {
    type: 'category',
    interval: 0,
    axisLine: {
      lineStyle: {
        color: '#B7B7B7',
      },
    },
    axisLabel: {
      fontSize: 10,
      color: '#3D3D3D',
    },
    axisTick: { show: false },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#B7B7B7',
      },
    },
    axisLabel: {
      fontSize: 10,
      color: '#3D3D3D',
    },
    splitLine: {
      opacity: 0.5,
    },
  },
  label: {
    show: true,
    fontSize: 10,
    fontWeight: 'bold',
    color: '#3D3D3D',
  },
}
